<template>
	我id是{{meId}}，我在跟id为{{toId}}的人聊天
	<view>
		<view :class="['message-item', item.fromId === meId ? 'right': '']" v-for="item in messageList">
			<image v-if="item.fromId !== meId" class="user-avatar" :src="toInfo.avatar"></image>
			<text>{{item.message}}</text>
			<image v-if="item.fromId === meId" class="user-avatar" :src="myInfo.avatar"></image>
		</view>
	</view>
	<view class="send-model">
		<view class="input-model">
			<up-input
			    placeholder="请输入内容"
			    border="surround"
			    v-model="messageValue"
			  ></up-input>
			  <button size="mini" @click="doSend">发送</button>
		</view>
	</view>
	<!-- <up-button @click="doPay">下单</up-button> -->
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import cusTabbarVue from '../../components/cus-tabbar/cus-tabbar.vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import io from '@hyoga/uni-socket.io';
	const messageValue = ref('')
	let socket = null
	let timer = null
	const doHeart = () => {
		timer && clearInterval(timer)
		timer = setInterval(() => {
			socket.emit('ping')
		}, 5000)
	}
	
	const linkSocket = () => {
		socket = io('ws://localhost:3000', {
			path: '/socket',
		  query: {
			  id: meId.value
		  },
		  transports: [ 'websocket', 'polling' ],
		  timeout: 5000,
		});
		socket.on('connect', () => {
			console.log('客户端链接服务成功了')
			// 链接成功后，添加定时器，每隔一段时间，向服务器发送一个无意义的消息，用来保证服务活跃
			doHeart()
			
			socket.on('receiveMsg', (info) => {
				console.log('客户端接收到服务端传过来的信息了', info)
				messageList.value.push(info)
			})
			socket.on('pang', () => {
				console.log('完成了一次心跳检测')
			})
		})
	}
	// 假装这个数据在数据库里
	const personList = [
		{name: '李少斌', id: 'bin', avatar: 'http://gips0.baidu.com/it/u=3602773692,1512483864&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280'},
		{name: '张学友', id: 'zxy', avatar: 'http://gips0.baidu.com/it/u=3822353666,2757632348&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280'}
	]
	const myInfo = ref({})
	const toInfo = ref({})
	// 这个方法用来找用户信息的
	const getUserInfo = () => {
		console.log(meId.value, '--------')
		myInfo.value = personList.find(item => item.id===meId.value) || {}
		toInfo.value = personList.find(item => item.id===toId.value) || {}
		// bin
	}
	
	const meId = ref('')
	const toId = ref('')
	onLoad((options) => {
		meId.value = options.meId
		toId.value = options.toId
		getUserInfo()
		linkSocket()
	})
	const messageList = ref([{
			fromId: 'bin',
			toId: 'zxy',
			message: '你好，可以帮我详细介绍下房源情况吗？'
		},
		{
			fromId: 'zxy',
			toId: 'bin',
			message: '你好，可以的'
		}
	])
	const doPay = () => {
		const token = uni.getStorageSync('token')
		if (!token) {
			uni.showToast({
				title: '用户需登录'
			})
		}
	}
	const doSend = () => {
		const messageObj = {
			fromId: meId.value,
			toId: toId.value,
			message: messageValue.value
		}
		messageList.value.push(messageObj)
		socket.emit('sendMsg', messageObj)
		messageValue.value = ''
	}
</script>

<style lang="scss" scoped>
	.user-avatar {
		width: 50rpx;
		height: 50rpx;
	}

	.message-item {
		display: flex;

		&.right {
			justify-content: flex-end;
		}
	}
	.input-model{
		display: flex;
	}
	.send-model{
		position: fixed;
		bottom: 0;
		width: 100vw;
		padding: 20rpx;
		box-sizing: border-box;
	}
</style>